<template>
  <div>
    <el-dialog
      width="600px"
      :title="title"
      :visible.sync="visible"
      @close="visible = false"
    >
      <el-form
        ref="form"
        :model="form"
        :show-message="false"
        label-width="100px"
      >
        <el-form-item label="被授权机构" prop="companyId" required>
          <SelectCompany
            :defaultValue.sync="form.companyId"
            :disabled="form.id"
            :companyType="1"
            placeholder="请选择被授权机构"
            style="width: 100%"
            @changeItem="changeCompany"
          />
        </el-form-item>
        <el-form-item label="API Key" prop="token">
          <div class="disFlxAC">
            <el-input v-model="form.token" placeholder="请输入API Key" />
            <el-button type="primary" size="mini" class="ml-10" @click="createToken">立即生成</el-button>
          </div>
        </el-form-item>
        <el-form-item label="备注说明" prop="remark">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.remark"
            placeholder="请输入配药机的型号及所属公司"
            :autosize="{ minRows: 3, maxRows: 5 }"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SelectCompany from "@/components/SelectCompany/index.vue";
import { getMachineAuthorizeToken, addMachineAuthorize, updateMachineAuthorize } from "@/api/order/waitMedicine.js";

export default {
  components: {
    SelectCompany,
  },
  data() {
    return {
      visible: false,
      title: '新增配药机授权',
      form: {
        id: undefined,
        companyId: undefined,
        companyName: undefined,
        token: "",
        remark: "",
      },
    };
  },
  methods: {
    openModal(row) {
      this.form = {};
      Object.assign(this.$data.form, this.$options.data().form);
      this.title = row ? "编辑配药机授权" : "新增配药机授权";
      if(row){
        this.form = row;
      }
      this.visible = true;
    },
    createToken() {
      getMachineAuthorizeToken().then(res=>{
        const { token } = res.data;
        this.form.token = token;
      })
    },
    changeCompany(e){
      this.form.companyName = e ? e.companyName : undefined;
    },
    confirm() {
      const that = this;
      that.$refs["form"].validate(async (valid) => {
        if(valid){
          if(that.form.id){
            updateMachineAuthorize(that.form).then(res=>{
              that.$message.success("编辑成功");
              that.$emit('refresh')
              that.visible = false;
            })
          }else{
            addMachineAuthorize(that.form).then(res=>{
              that.$message.success("新增成功");
              that.$emit('refresh')
              that.visible = false;
            })
          }
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped></style>
